<template>
  <div class="layout">
    <el-container v-if="state.showMenu" class="container">
      <div class="main">
        <router-view></router-view>
      </div>
      <Tabbar/>
    </el-container>

    <el-container v-else class="container">
      <router-view />
    </el-container>

  </div>
</template>

<script setup lang="ts">
import Tabbar from "@/components/tab-bar.vue";
import { useRoute } from "vue-router";
import {ref,onMounted, reactive } from 'vue'
import axios from '@/utils/axios'
import { useRouter } from 'vue-router'
import { localGet, pathMap } from '@/utils'

const noMenu = ['/login','/register']
const router = useRouter()
const state = reactive({
  showMenu: true,
  defaultOpen: ['1', '2', '3', '4'],
  currentPath: '/',
  models: null,
})

router.beforeEach((to, from, next) => {
  if (to.path == '/login' || to.path == '/register') {
    // 如果路径是 /login 或 /register，则不显示底部导航栏
    state.showMenu = false;
    next();
  } else {
    // 如果不是 /login 或 /register，判断是否有 token
    if (!localGet('token')) {
      // 如果没有，则跳至登录页面
      next({ path: '/login' });
    } else {
      // 否则继续执行
      next();
    }
  }
  state.showMenu = !noMenu.includes(to.path);
  state.currentPath = to.path;
  document.title = pathMap[to.name];
});
</script>

<style scoped>
.layout {
  min-height: 100vh;
  background-color: #ffffff;
}

.container {
  height: 100vh;
}

.main{
  margin-top:0px;
  height: 100vh;
  overflow: auto;
}
</style>